<template>
	<view>
		<view class="page-foot"><view class="g-btn1" @click="payment()">立即支付</view></view>
		<view class="container">
			<view class=" price tc col-yellow fwb">￥{{payPrice}}</view>
			<view class="p20 br10 bg-white fs30 col-black mb30 flex-box">
				<view class="fwb mr20">订单号</view>
				<view class="fs32">{{orderNo}}</view>
			</view>
			<view class="pay-pop bg-white">
				<view class="pay-item flex-box m-hairline--bottom">
					<image class="icon1 mr30" src="/static/icon/icon_wechat.png" mode="aspectFit"></image>
					<view class="fs28 col-black flex-1">微信支付</view>
					<image class="icon2" src="/static/icon/circle_selected.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	var jweixin = require('@/xiluedu/jweixin.js');
	// #endif

export default {
	data() {
		return {
			type: '',
			order_id: 0,
			payPrice:0,
			orderNo:'',
		};
	},
	onLoad(options){
		this.type = options.type || '';
		this.order_id = options.order_id || 0;
		this.payPrice = options.pay_price || 0;
		this.orderNo = options.order_no || '';
	},
	methods: {
		payment(){
			//#ifdef MP-WEIXIN
			let type = this.type;
			let order_id = this.order_id;
			this.$core.post({url:'xiluedu.pay/pay',data:{type: type,pay_type:1,order_id:order_id,platform:'wxmini'},success:(ret)=>{
				let wxconfig =  ret.data;
				uni.requestPayment({
				    provider: 'wxpay',
					timeStamp: wxconfig.timeStamp,
					nonceStr: wxconfig.nonceStr,
					package: wxconfig.package,
					signType: wxconfig.signType,
					paySign: wxconfig.paySign,
					success: function (res) {
						uni.redirectTo({
							url:'../success/success?type='+type+'&order_id='+order_id
						})
					},
					fail: function (err) {
						console.log(err);
					}
				});
			}});
			//#endif
			//#ifdef H5
				let type = this.type;
				let order_id = this.order_id;
				let openid = this.$core.getCache('wx_openid') || '';
				this.$core.post({url:'xiluedu.pay/pay',data:{type: type,pay_type:1,order_id:order_id,platform:'wxpublic',openid: openid},success:(ret)=>{
					let wxconfig =  ret.data;
					jweixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId:wxconfig.appId, // 必填，公众号的唯一标识
						timestamp:wxconfig.timeStamp, // 必填，生成签名的时间戳
						nonceStr:wxconfig.nonceStr, // 必填，生成签名的随机串
						signature:wxconfig.paySign, // 必填，签名，见附录1
						jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					});
					jweixin.ready(function() {
						jweixin.checkJsApi({
							jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
							success: function(res) {
								uni.hideLoading();
							},
							fail:function(res) {
								uni.hideLoading()
							}
						});
						jweixin.chooseWXPay({
							timestamp: wxconfig.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
							nonceStr: wxconfig.nonceStr, // 支付签名随机串，不长于 32 位
							package: wxconfig.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
							signType: wxconfig.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
							paySign:wxconfig.paySign, // 支付签名
							success:function(res) {
								
								uni.redirectTo({
									url:'../success/success?type='+type+'&order_id='+order_id
								})
								
							},
							cancel: function(r) {
							   uni.showToast({
								title:'取消支付了',
								icon:'none',
								mask:true
							   })
							},
							fail:function(res) {
								uni.hideLoading()
								uni.showToast({
									title:'支付失败了',
									icon:'none',
									mask:true
								})
							}
						});
					});
					 
					jweixin.error(function(res) {
						// uni.showToast({
						// 	icon: 'none',
						// 	title: '支付失败了',
						// 	duration: 4000
						// });
					});
				}});
			//#endif
		}
	}
};
</script>

<style scoped>
.page-foot {
	padding: 30rpx;
	background-color: #fff;
}
.container {
	padding: 100rpx 30rpx 30rpx;
	background: rgb(245, 245, 245);
}
.price {
	margin: 0 0 100rpx;
	font-size: 50rpx;
}
.pay-pop {
	padding: 0;
	border-radius: 10rpx;
}
.pay-pop .pay-item {
	padding: 25rpx;
}
.pay-pop .icon1 {
	display: block;
	width: 62rpx;
	height: 60rpx;
}
.pay-pop .icon2 {
	width: 38rpx;
	height: 38rpx;
	border-radius: 50%;
}
</style>
